import Vue from 'vue';
// 引入路由器
import VueRouter from 'vue-router';
// 引入路由
import ShengXian from '../views/homepage/ShengXian.vue';
import TiaoLiao from '../views/homepage/TiaoLiao.vue';
import ShengRou from '../views/homepage/shengxian/ShengRou.vue'
import DanLei from '../views/homepage/shengxian/DanLei.vue';
// import NotFound from '../views/NotFound.vue';
const NotFound = ()=>import('../views/NotFound.vue')
/* 
路由懒加载 通过import加载模块 分模块进行单独打包 首次运行时速度加快
代码分割（code split)

vue单页面应用（spa） 懒加载 运用webpack打包 打包过后的文件非常大 进入首页 由于内容过多 卡  白屏 即使使用了loading加载 也不利于用户体验，使用懒加载 可以将页面划分 可以缓解首页加载的压力


*/


// 声明使用vue插件

Vue.use(VueRouter);

const router = new VueRouter({
    // http://localhost:9000/#/personalpage
    // hash(哈希模式)

    // mode:"hash",

    // http://localhost:9000/catepage
    mode:"history",
    // 注册路由
    routes:[
        {
            path:'/homepage',//此处/代表根路径  路径当中不建议有中文
            name:'homepage',
            component:()=>import('../views/HomePage.vue'),
            meta:{
                show:true
            },
            children:[
                {
                    path:'shengxian',
                    name:'shengxian',
                    component:ShengXian,
                    children:[
                        {
                            path:'shengrou',//可以省略父级的路径，直接写当前的，但是不能在前面加 / 
                            name:'shengrou',
                            component:ShengRou
                        },
                        {
                            path:'/homepage/shengxian/danlei',
                            name:'danlei',
                            component:DanLei
                        }
                    ]
                },{
                    path:'/homepage/tiaoliao',
                    name:'tiaoliao',
                    component:TiaoLiao
                }
            ]
        },
        {
            path:'/catepage',
            name:'catepage',
            component:()=>import('../views/CatePage.vue'),
            meta:{
                show:true
            },
        },
        {
            path:"/cartpage",
            name:'cartpage',
            component:()=>import('../views/CartPage.vue'),
            meta:{
                show:true
            },
            children:[
                {
                    path:'goodslist',
                    name:'goodslist',
                    component:()=>import('@/views/cartpage/GoodsList.vue')
                },
                {
                    path:'jiesuan',
                    name:'jiesuan',
                    component:()=>import('@/views/cartpage/JieSuan.vue')
                }
            ]

        },
        {
            path:'/personalpage',
            name:'personalpage',
            // alias:'/hanhan',//别名
            component:()=>import('../views/PersonalPage.vue'),
            meta:{
                show:true
            },
            children:[
                {
                    path:'shezhi',
                    name:'shezhi',
                   /*  component:()=>import('../views/personalpage/SheZhi.vue') */
                   components:{
                       default:()=>import('../views/personalpage/SheZhi.vue'),
                       one:()=>import('../views/personalpage/SheZhiOne.vue'),
                       two:()=>import('../views/personalpage/SheZhiTwo.vue')
                   }
                },
                {
                    path:'geren',
                    name:'geren',
                    component:()=>import('../views/personalpage/GeRen.vue')
                }
            ]
        },
        // goods详情
        {
            // params传值 一定要先配置占位符
            path:'/goodsitem',
            name:'goodsitem',
            component:()=>import('../views/GoodsItem.vue')
        },
        {
            path:'/register',
            name:'register',
            component:()=>import('../views/Register.vue')
        },
        {
            path:'/login',
            name:'login',
            component:()=>import('../views/Login.vue') 
        },
        {
            path:'/vip',
            name:'vip',
            component:()=>import('../views/vip.vue')
        },
        // 重定向
        {
            path:'/',
            // redirect:'/homepage'
            redirect:{
                // name:'homepage'
                path:'/homepage'
            }
        },
        // *所有不存在
        {
            path:'*',
            component:NotFound
        }
    ]
})
// 全局守卫
// 全局前置守卫和全局后置守卫
/* router.beforeEach((to,from,next)=>{
    // http://localhost:9000/  起始位置 null
    // 重定向
    // http://localhost:9000/homepage  目标位置 homepage
    console.log(to);//目标路由
    console.log(from);//起始路由
    console.log(next);
    next();//放行
})
 */
/* 
需求：
如果是会员可以进入分类和购物车 首页 个人中心等等 会员都能去
如果不是会员 游客 只可以进入 首页 个人中心 充值页面（vip）


paths存放路径 数组  []  游客能进入的路径首页 个人中心 充值页面（vip）

用户 
是会员 去哪里都放行 next()  1
是游客 只有to.path在paths里面 放行  不是跳转到vip(充值去) 0

to.path是否在paths里面
paths  []  元素 字符串
to.path 字符串
在一个全是字符串的数组中查找符合条件的字符串
includes find filter  indexof
使用上述四种方法查找
















*/
// 路由 前置守卫 

// router.beforeEacth((to,from,next)=>{})
let paths = ['/homepage','/personalpage','/vip'];
let user = {
    name:'lele',
    flagVip: 1 //游客
}
router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    console.log(next);
    // console.log(user.flagVip);
    // 是游客还是会员
    if(user.flagVip == 0){
        // 游客
        if(paths.indexOf(to.path) >= 0){
            next();
        }else{
            next('/vip');
        }

    }else{
        // 会员
        next();
    }
})


export default router